<template>
	<view class="conntainer">
		<view class="form">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :model="information" labelWidth="80px">
				<uni-forms-item class="label" label="昵称" required>
					<uni-easyinput v-model="information.nickname" placeholder="请输入您的昵称" />
				</uni-forms-item>
				<uni-forms-item class="label" label="年龄" required>
					<uni-easyinput type="number" maxlength=2 v-model="information.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item class="label" label="性别" required>
					<uni-data-checkbox v-model="information.sex" :localdata="sexs" />
				</uni-forms-item>
				<!-- 	<uni-forms-item class="label" label="交友偏好" required>
					<uni-data-checkbox v-model="information.preference" :localdata="preference" />
				</uni-forms-item> -->
				<uni-forms-item class="label" label="选择城市" required>
					<uni-data-picker v-model="information.county" :localdata="cityData" popup-title="东营市">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item class="label" label="情感状态" required>
					<uni-data-picker v-model="information.emotion" :localdata="status" popup-title="情感状态" />
				</uni-forms-item>
				<uni-forms-item class="label" label="手机号码" required>
					<div class="mobile">
						<uni-easyinput type="number" v-model="information.mobile" placeholder="请输入手机号" />
					</div>
					<div class="verifyCode" @click="getVerifyCode">{{verifyMsg}}</div>
				</uni-forms-item>
				<uni-forms-item>
					<div class="mobile" label=" ">
						<uni-easyinput type="number" v-model="information.verifyCode" placeholder="请输入验证码" />
					</div>
				</uni-forms-item>
				<uni-forms-item label="邀请码">
					<div class="mobile">
						<uni-easyinput v-model="information.invitationCode" placeholder="请输入邀请码" />
					</div>
				</uni-forms-item>
			</uni-forms>

			<view class="submit">
				<checkbox-group class="cb-group">
					<label>
						<checkbox style="transform:scale(0.7)" value="cb" />我承诺本人单身，以单身状态加入，目的不纯者拒绝加入。
					</label>
					<label>
						<checkbox style="transform:scale(0.7);margin-top:10px;" value="cb" /> 同意<span
							@click="goToAgreement" style="color:#007aff">《用户服务及隐私协议》</span>
					</label>
				</checkbox-group>
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import {
		localData,
		weightMap,
		heightMap,
		ageMap
	} from '@/pages/tabBar/Discover/data.js' //筛选菜单数据
	export default {
		data() {
			return {
				education: localData[2].submenu,
				emotion: localData[3].submenu,
				age: localData[4].submenu[1].submenu,
				weight: localData[4].submenu[2].submenu,
				height: localData[4].submenu[0].submenu,
				car: ['未知', '无车', '有车无贷', '有车有贷'],
				house: ['未知', '无房', '有房无贷', '有房有贷'],
				inviterUid: '',
				agree: '',
				verifyMsg: '获取校验码',
				information: {
					invitationCode: '',
					mobile: '',
					nickname: '',
					age: '',
					sex: '',
					county: '',
					emotion: '',
					verifyCode: ''
				},
				chooseFriend: {},
				sexs: [{
					value: '男',
					text: '男'
				}, {
					value: '女',
					text: '女'
				}],
				cityData: [{
						value: '经济技术开发区',
						text: '经济技术开发区'
					},
					{
						value: '东营区',
						text: '东营区'
					},
					{
						value: '广饶县',
						text: '广饶县'
					},
					{
						value: '河口区',
						text: '河口区'
					},
					{
						value: '利津县',
						text: '利津县'
					},
					{
						value: '垦利区',
						text: '垦利区'
					},
					{
						value: '东营港经济开发区',
						text: '东营港经济开发区'
					}, {
						value: '不限',
						text: '不限'
					}
				],
				status: [{
						value: 0,
						text: '母胎单身'
					},
					{
						value: 1,
						text: '未婚'
					},
					{
						value: 2,
						text: '离异不带孩'
					},
					{
						value: 3,
						text: '离异带男孩'
					},
					{
						value: 4,
						text: '离异带女孩'
					},
					{
						value: 5,
						text: '丧偶'
					}
				],
				preference: [{
						value: 0,
						text: '找男朋友'
					},
					{
						value: 1,
						text: '找女朋友'
					},
				],
				agreement: [{
						value: 0,
					},
					{
						value: 1,
					}
				]
			};
		},
		onLoad(param) {
			this.information.invitationCode = param.inviteCode || ''
		},
		methods: {
			// 跳转协议页面
			goToAgreement() {
				uni.navigateTo({
					url: '/pages/commonPage/commonPage?type=注册协议'
				})
			},
			submit() {
				request(url.register, 'POST', {
					information: this.information,
					chooseFriend: this.chooseFriend
				}).then(res => {
					if (res.status === 200) {
						//成功
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabBar/Home/Home'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				})
			},
			getVerifyCode() {
				//获取验证码
				if (this.verifying) {
					return
				}
				if (!this.information.mobile) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'fail',
					})
					return
				}
				request(url.getSMSCode, 'GET', {
					phone: this.information.mobile
				}).then(res => {
					console.log(res)
					if (res.status === 200) {
						this.verifying = true;
						let a = 60;
						let retry = setInterval(() => {
							this.verifyMsg = `重试(${a--}s)`
						}, 1000)
						setTimeout(() => {
							clearInterval(retry)
							this.verifying = false;
							this.verifyMsg = '获取验证码';
						}, 61000)
					} else {
						uni.showToast({
							title: '获取验证码失败，请稍后重试',
							icon: 'fail',
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'fail',
					})
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.form {
		padding: 15px;
		background: #fff;
		min-height: 100%;
		width: 100%;
	}

	.mobile {
		width: 60%;
	}

	.container {
		background: #fff;
	}

	.verifyCode {
		margin-left: 15px;
		background-color: #007aff;
		color: #fff;
		font-size: 11px;
		padding: 4px;
	}

	.submit {
		.cb-group {
			display: flex;
			flex-direction: column;
			color: #606266;
			font-size: 13px;
		}

		margin-top: 40px;

		/deep/ .uni-data-checklist .checklist-group .checklist-box {
			margin-bottom: 10px;
		}

		button {
			margin-top: 10px;
			// background-color:#00B7EE;
		}
	}

	uni-page-body {
		background-color: #fff !important;
	}

	/deep/ .uni-forms-item__content {
		display: flex;
		align-items: center;
	}

	/deep/ .uni-forms-item {
		margin-bottom: 15px;
	}
</style>
